<template>
	<view>
		<view class="project flex align-center">
			<view class="project_image">
				<image :src="selectValue.spec_image" mode=""></image>
			</view>
			<view>
				<view class="price">
					<text class="name">拼团价：</text>
					<text class="money">{{selectValue.goods_price}}</text>
					<text>元/{{selectValue.unit || selectValue.sku_name}}</text>
				</view>
				<!-- <view class="ensuer">已选择 {{selectValue.sku_name}} {{buyNub}}件</view> -->
			</view>
		</view>
		<view class="type_box">
			<view class="type" v-for="(items,i) in typeList" :key="i">
				<view class="name">{{items.spec_name}}：</view>
				<view class="type_list">
					<view class="type_item"
					v-for="(item,index) in items.spec_value" :key="index"
					:class="item.selectActive ? 'active' : ''"
					@tap="switchType(i,index)">{{item.spec_value}}</view>
				</view>
			</view>
		</view>
		
		<view class="bottom_box">
			<view class="select_number flex align-center justify-between">
				<view class="name">数量：</view>
				<view class="select_nub flex align-center">
					<view class="select_box" @tap="delNub">
						<image src="/static/image/icon/jian.png" mode=""></image>
					</view>
					<input class="ensure_nub" type="number" v-model="buyNub">
					<!-- <view class="ensure_nub">{{buyNub}}</view> -->
					<view class="select_box" @tap="addNub">
						<image class="add" src="/static/image/icon/add1.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="totalMoney">小计：<text>￥{{totalMoney ? totalMoney : selectValue.goods_price}}</text></view>
			<view class="ensure_btn" @tap="addCart">确定</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			unit:{
				type:String
			},
			typeList:{
				type:Array
			},
			typeObject:{
				type:Array
			},
			selectValue:{
				type:Object
			},
			goodsId:{
				type:String
			},
			goodsType:{
				type:String
			},
			// 1:加入购物车，2.单个商品购买，3.送礼
			type:{
				type:Number
			},
			// 从哪进
			fromType:{
				type:Number
			},
			addStatus:{
				type:Number
			},
			activityId:{
				type:String
			},
			grouponId:{
				type:String
			},
			limitNum:{
				type: Number,
				default: 1
			}
		},
		data(){
			return{
				imgBaseUrl:this.$http.imgBaseUrl,
				localBaseUrl:this.$http.localBaseUrl,
				typeTab:[],
				buyNub:1, //购买的数量
				totalMoney:0, //总价
				money:0
			}
		},
		methods:{
			clearNub(){
				this.buyNub = 1
			},
			switchType(i,index){
				console.log(i,index)
				uni.$emit('selectType',{i:i,index:index,type:this.fromType})
			},
			addNub(){
				if(this.limitNum>0 && this.buyNub >=this.limitNum){
					uni.showToast({
						title:'每单限购'+this.limitNum+'件',
						icon:'none'
					})
					return
				}
				if(this.buyNub >= this.selectValue.stock_num){
					return
				}else{
					this.buyNub++;
					this.totalMoney = this.$helper.operation(this.selectValue.goods_price,this.buyNub,'multiply');
					this.totalMoney = this.totalMoney.toFixed(2)
				}
			},
			delNub(){
				if(this.buyNub <= 1){
					return
				}else{
					this.buyNub --;
					this.totalMoney = this.$helper.operation(this.selectValue.goods_price,this.buyNub,'multiply');
					this.totalMoney = this.totalMoney.toFixed(2)
				}
			},
			addCart(){
				console.log(this.addStatus)
				if(this.addStatus == 0){
					uni.showToast({
						title:'请选择规格',
						icon:'none'
					})
					return
				}else if(this.addStatus == 2){
					uni.showToast({
						title:'该商品已下架',
						icon:'none'
					})
					return
				}
				var params = {
					goods_id:this.goodsId,
					sku_id:this.selectValue.goods_spec_id,
					num:this.buyNub,
					activity_id: this.activityId
				}
				if(this.grouponId){
					params.groupon_id = this.grouponId
				}
				console.log('==============')
				console.log(params)
				if(this.type == 1){
					this.$http.addCart(params).then(res=>{
						console.log(res)
						this.buyNub = 1
						uni.$emit('addCart',{type:this.fromType})
						if(res.code != 1){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}else{
					let api = this.activityId?'groupConfirmOrder':'buyNowConfirmOrder'
					console.log('--->',api)
					// this.$http.groupConfirmOrder(params).then(res=>{
					this.$http[api](params).then(res=>{
						console.log(res)
						this.buyNub = 1
						if(res.code == 1){
							uni.removeStorageSync('order')
							uni.setStorageSync('order',Object.assign(res.data , {type:this.goodsType}))
							if(this.type == 2){
								let url = ''
								if(this.activityId){
									url = '/pages/views/confirmOrder/confirmOrder1?type='+this.type+'&sku_id='+params.sku_id+'&activity_id='+this.activityId+'&groupon_id='+this.grouponId
								}else{
									url = '/pages/views/confirmOrder/confirmOrder?type='+this.type+'&sku_id='+params.sku_id
								}
								uni.navigateTo({
									url:url
								})
							}else{
								uni.navigateTo({
									url:'/pages/views/giftOrder/giftOrder?type='+this.type+'&sku_id='+params.sku_id
								})
							}
							
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.project{
		padding-left: 30rpx;
		.project_image{
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.price{
			font-size: 22rpx;
			font-weight: 400;
			color: #666;
			.name{
				font-size: 24rpx;
				color: #CA121B;
			}
			.money{
				font-size: 30rpx;
				color: #CA121B;
				font-weight: 500;
			}
		}
		.ensure{
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
		}
	}
	.type_box{
		width: 100%;
		height: 400rpx;
		overflow-y: scroll;
	}
	.type{
		margin-top: 40rpx;
		padding: 0 30rpx;
		padding-right: 0;
		.name{
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}
		.type_item{
			display: inline-block;
			background: #F1F1F1;
			border-radius: 20rpx;
			padding: 0 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;
			line-height: 44rpx;
			margin-top: 30rpx;
			margin-right: 20rpx;
		}
		.active{
			background: #fbebeb;
			color: #E52F27;
		}
	}
	.select_number{
		margin-top: 40rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;
		.name{
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}
		.select_nub{
			.select_box{
				width: 30rpx;
				height: 30rpx;
				position: relative;
			}
			image{
				width: 31rpx;
				height: 6rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
			.add{
				width: 30rpx;
				height: 30rpx;
			}
			.ensure_nub{
				width: 60rpx;
				height: 30rpx;
				background: #F1F1F1;
				border-radius: 8rpx;
				text-align: center;
				line-height: 30rpx;
				margin: 0 20rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #E52F27;
			}
		}
	}
	.totalMoney{
		margin-top: 60rpx;
		padding-right: 30rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		text-align: right;
		text{
			font-size: 30rpx;
			color: #CA121B;
			font-weight: 500;
		}
	}
	.ensure_btn{
		width: 690rpx;
		height: 70rpx;
		background: #E52F27;
		border-radius: 29rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	.bottom_box{
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
	}
</style>
